<template>
    <view class="container">
        <!-- 状态栏占位 -->
        <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
        
        <!-- 用户信息卡片 -->
        <view class="user-card" @click="goToUserProfile">
            <image class="user-avatar" :src="userData.avatar || public_img + '/img/my.png'" mode="aspectFill" @error="handleAvatarError"></image>
            <view class="user-info">
                <text class="user-name">{{ userData.nickname || userData.username || "未登录" }}</text>
                <text class="user-account">账号: {{ userData.username || "暂无" }}</text>
            </view>
            <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>

        <!-- 设置菜单 -->
        <view class="menu-list">
            <view class="menu-item" @click="goToAccountSecurity">
                <text class="menu-text">账户与安全</text>
                <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
            </view>
            <view class="menu-item" @click="goToAddress">
                <text class="menu-text">收货地址</text>
                <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
            </view>
            <view class="menu-item" @click="goToInfoSettings">
                <text class="menu-text">信息设置</text>
                <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
            </view>
        </view>

        <!-- 退出登录按钮 -->
        <view class="logout-btn" @click="handleLogout">
            <text class="logout-text">退出登录</text>
        </view>
    </view>
</template>

<script>
import { public_img } from '@/static/public.js';
import { userApi } from '@/api/indexAPI.js';

export default {
    data() {
        return {
            public_img: public_img,
            statusBarHeight: 0,
            userData: {
                avatar: '',
                nickname: '',
                username: '',
                intr: null
            }
        }
    },
    onLoad() {
        // 获取状态栏高度
        this.getStatusBarHeight();
        // 加载用户数据
        this.loadUserData();
    },
    methods: {
        // 获取状态栏高度
        getStatusBarHeight() {
            try {
                const systemInfo = uni.getSystemInfoSync();
                this.statusBarHeight = systemInfo.statusBarHeight || 0;
            } catch (err) {
                console.error('获取状态栏高度失败', err);
                this.statusBarHeight = 20;
            }
        },
        // 加载用户数据
        async loadUserData() {
            try {
                const response = await userApi.getUserCenter();
                if (response && (response.code === 1 || response.code === 200) && response.data) {
                    this.userData = {
                        ...this.userData,
                        ...response.data
                    };
                }
            } catch (error) {
                console.error('获取用户信息出错:', error);
            }
        },
        // 处理头像加载错误
        handleAvatarError() {
            this.userData.avatar = this.public_img + '/img/my.png';
        },
        // 跳转到用户资料
        goToUserProfile() {
            // 可以跳转到用户资料编辑页面
            uni.showToast({
                title: '功能开发中',
                icon: 'none'
            });
        },
        // 跳转到账户与安全
        goToAccountSecurity() {
            uni.showToast({
                title: '功能开发中',
                icon: 'none'
            });
        },
        // 跳转到收货地址
        goToAddress() {
            uni.navigateTo({
                url: '/pages/location/index'
            });
        },
        // 跳转到信息设置
        goToInfoSettings() {
            uni.showToast({
                title: '功能开发中',
                icon: 'none'
            });
        },
        // 退出登录
        handleLogout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                success: (res) => {
                    if (res.confirm) {
                        // 清除本地存储
                        uni.removeStorageSync('token');
                        uni.removeStorageSync('uid');
                        uni.removeStorageSync('userInfo');
                        uni.removeStorageSync('listAll');
                        uni.removeStorageSync('currentTabBarPage');
                        
                        // 显示提示
                        uni.showToast({
                            title: '已退出登录',
                            icon: 'success',
                            duration: 1500
                        });
                        
                        // 延迟跳转到登录页
                        setTimeout(() => {
                            uni.reLaunch({
                                url: '/pages/login/index'
                            });
                        }, 1500);
                    }
                }
            });
        }
    }
}
</script>

<style scoped>
.container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 120rpx;
}

/* 状态栏占位 */
.status-bar {
    width: 100%;
    background-color: #ffffff;
}

/* 用户信息卡片 */
.user-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #ffffff;
    padding: 30rpx;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}

.user-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 30rpx;
}

.user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 32rpx;
    color: #000000;
    margin-bottom: 10rpx;
}

.user-account {
    font-size: 28rpx;
    color: #999999;
}

/* 设置菜单 */
.menu-list {
    background-color: #ffffff;
    margin-bottom: 20rpx;
}

.menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-text {
    font-size: 30rpx;
    color: #000000;
}

/* 退出登录按钮 */
.logout-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: white;
    padding: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.logout-text {
    font-size: 32rpx;
    color: #000000;
}
</style>
